<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    * { padding: 0; margin: 0; box-sizing: border-box; }
    html,body {
      width: 100%;
      height: 100%;
      background: url('https://gitee.com/dulily/cdn/raw/master/img/214707-1543326427a764.jpg') no-repeat top center;
      /* background: url('https://gitee.com/dulily/cdn/raw/master/img/me.jpg') no-repeat top center; */
      background-size: 100% 100%;
    }
    .container { width: 100%; height: 100%; overflow: hidden; }
    .contain-top { width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #ffffff; }
    .contain-image { position: relative; }
    .contain-image img { width: 120px; height: 120px; border-radius: 50%; border-bottom: 6px solid rgba(255, 255, 255, 0.2); transition: width 0.5s, height 0.5s; }
    .img-star { position: absolute; top: 14px; right: 31px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: star 2s 2s infinite; box-shadow: 0 0 2px 2px rgb(235, 235, 235); }
    .contain-image img:hover { cursor: pointer; width: 150px; height: 150px; }
    .title-name { padding: 20px 0; font-weight: bold; font-size: 30px; }
    .animate-box { font-size: 22px; }
    @keyframes star {
      0% { opacity: 1; }
      100% { opacity: 0.2; }
    }
    .fadeOut { animation:fadeOut 1s both; }
    @keyframes fadeOut {
      0%{ opacity: 0; transform: scale3d(.2,.2,.2); }
      100%{ opacity: 1; }
    }
    /* transition: all ease 2s; */
    .animate-left{ animation: slideRight 1s;display: inline-block; }
    @keyframes slideRight {
      0% { transform: translateX(-270px); opacity: 0; transition: .5s; }
      100% { transform: translateX(0px); opacity: 1; transition: .5s; }
    }
    .animate-right{ animation: slideLeft 1s;display: inline-block; }
    @keyframes slideLeft {
      0% { transform: translateX(270px); opacity: 0; transition: .5s; }
      100% { transform: translateX(0px); opacity: 1; transition: .5s; }
    }
    .contain-center { width: 100%; height: 80%; position: relative; }
    .center-left, .center-right { width: 80%; height: 100%; background: rgba(0, 0, 0); opacity: 0.5; }
    .center-left { transform: rotate(6deg); position: absolute; bottom: 0px; right: 48%; }
    .center-right { transform: rotate(-6deg); position: absolute; bottom: 0px; left: 48%; }
    @media screen and (max-width: 500px) {
      .title-name { font-size: 24px; }
      .animate-box{ font-size: 16px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="contain-top">
      <div class="contain-image fadeOut">
        <img src="https://gitee.com/dulily/cdn/raw/master/img/ava.png" alt="">
        <div class="img-star"></div>
      </div>
      <div class="title-name fadeOut">Yrainly</div>
      <div class="animate-box">
        <span class="animate-left">星光不问赶路人</span>
        <span class="animate-right">时光不负有心人</span>
      </div>
    </div>
    <div class="contain-center">
      <div class="center-left"></div>
      <div class="center-right"></div>
    </div>
  </div>
</body>
</html>